<template>
  <div class="header-container">
    <div class="header-left">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/dashboard' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item v-if="currentRoute.meta.parent">{{ currentRoute.meta.parent }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ currentRoute.meta.title }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>


    <div class="header-right">
      <el-dropdown trigger="click">
        <span class="el-dropdown-link" v-if="userInfo">

          <span class="username">欢迎{{ userInfo.account }}登录</span>
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
          <el-avatar :size="32" :src="serverUrl+userInfo.imgUrl" />

        </span>

        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="goToProfile">个人中心</el-dropdown-item>
            <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { ArrowRight, ArrowDown } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import { computed, ref } from 'vue'
import { accountInfo } from "../api/account";
import { serverUrl } from '../utils/common';

const route = useRoute()
const router = useRouter()

// 计算当前路由信息
const currentRoute = computed(() => {
  return route
})

// 跳转到个人中心
const goToProfile = () => {
  router.push('/profile')
}

// 处理退出登录
const handleLogout = () => {
  // 这里可以添加退出登录的逻辑
  router.push('/')
  sessionStorage.removeItem('user')
}

const user = JSON.parse(sessionStorage.getItem('user'));
const userInfo = ref()

const getPersonalInfo = async () => {
  let res = await accountInfo({ id: user.id })
  userInfo.value = res.accountInfo;
}
getPersonalInfo()
</script>

<style scoped>
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 20px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.header-left {
  display: flex;
  align-items: center;
}

.header-right {
  display: flex;
  align-items: center;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #303133;
  outline: none;
}

.el-dropdown-link:focus {
  outline: none;
}

:deep(.el-dropdown-link:focus-visible) {
  outline: none;
}

:deep(.el-popper) {
  margin-top: 8px;
}

.username {
  margin: 0 8px;
  font-size: 14px;
}

.el-dropdown-link:hover {
  color: #409EFF;
}

.el-avatar {
  margin-right: 0;
}
</style>